<template>
  <div class="search-div">
    <el-input
      style="width: 100%;"
      placeholder="搜索地点"
      class="search-input input-with-select"
      v-model="searchKey"
      clearable
      :trigger-on-focus="false"
      @input="changeSearchList()"
      @focus="focus"
      @keyup.enter.native="searchKeyWord()"
    >
      <el-select
        v-model="value"
        slot="prepend"
        placeholder="城市"
        @clear="clearCityValue"
        clearable
      >
        <div
          class="city-list"
          slot="empty"
        >

          <div
            class="city-list-item"
            v-for="item in cityList"
            :key="item.cityCode"
          >
            <div class="city">
              <el-link
                :underline="false"
                @click="selectCity(item)"
              >
                {{ item.nameabbrevation }}
              </el-link>
            </div>
            <div class="city-childs">
              <div
                v-for="ite in item.child"
                :key="ite.cityCode"
                class="city-childs-item"
              >
                <el-link
                  :underline="false"
                  @click="selectCity(ite)"
                >
                  {{ ite.nameabbrevation }}
                </el-link>
              </div>
            </div>
          </div>
        </div>
      </el-select>
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="searchKeyWord()"
      ></el-button>
    </el-input>
    <div
      class="search-list"
      :style="{ height: listDivHeight + 'px' }"
      id="search-list"
      v-show="searchListVisiable"
    >
      <ul
        class="search-list-ul"
        v-if="hasSearchList"
      >
        <li
          v-for="item in searchList"
          :key="item.hotPointID"
        >
          <el-link
            :underline="false"
            @click="createMarker(item)"
          >
            <i class="el-icon-location-information"></i>
            {{ item.name }}
          </el-link>
          <br />
          <span style="font-size: 12px;vertical-align: bottom;">地址: {{ item.address }}</span>
          <el-divider></el-divider>
        </li>
      </ul>
      <span v-else>没有搜索到有关【{{ this.searchKey }}】的信息</span>
    </div>
  </div>
</template>

<script>

import { tdtSearch, tdtGeocoder, tdtAdmin } from '@/api/tdt';

export default {
  props: {
    map: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      searchKey: null,
      listDivHeight: window.innerHeight - 180,
      searchList: null,
      count: 10,
      searchListVisiable: false,
      hasSearchList: false, // 是否搜索到数据
      select: null,
      cityList: [],
      value: null,
    }
  },
  methods: {
    searchKeyWord () {
      if (this.searchKey && this.searchKey.length > 0) {
        this.hasSearchList = true;
        this.searchKeyStr();
      } else {
        // 搜索框没数据
        this.searchList = null;
        this.searchListVisiable = false;
        this.$emit('clearMarkers');
      }

    },
    // 关键字搜索
    searchKeyStr () {
      let postStr = {
         // 关键字
          "keyWord": this.searchKey,
          // 分页
          "start": '0',
          "count": '30'
      }
      // 选中城市进行行政区划区域查询
      if (this.selectedCity) {
        postStr.specify = this.selectedCity.cityCode;
        postStr.queryType = 12;
      } else {
        postStr.level = this.map.getView().getZoom();
        postStr.mapBound = "61.17968750000273,1.2443569119745916,149.07031250000273,53.90364326695567";
        postStr.queryType = 7;
      }
      
      var params = {
        // 注意参数格式
        postStr: JSON.stringify(postStr),
        type: 'query',
        // 请更换自己的 tk，此 tk 只能在当前域名下使用
        tk: '9aa421bfac4b31f0ad91a7118973689d'
      };
      console.log('查询参数:', params)
      let that = this;
      tdtSearch(params).then((res) => {
        that.searchList = res.pois;
        that.$emit('getResults', res.pois);
        if (that.searchList) {
          that.searchListVisiable = true;
          console.log(that.searchListVisiable)
          that.computeListDivHeight();
        } else {
          that.hasSearchList = false;
          that.setListDivHeight('40px');
          that.searchListVisiable = true;
        }
      });

    },

    // 行政区划，根据关键字查询行政区划信息；包括名称、类型（省市）、范围等
    searchGovernment (val) {

      let that = this;

      var params = {
        // 注意参数格式
        postStr: JSON.stringify({
          // 关键字
          "searchWord": val,
          "searchType": '0',
          // 子项
          "needSubInfo": 'false',
          // 所有属性
          "needAll": 'true',
          // 边界属性，好像是不起作用
          "needPolygon": 'true',
          "needPre": 'true',
        }),
        type: 'query',
        // 请更换自己的 tk，此 tk 只能在当前域名下使用
        tk: '9aa421bfac4b31f0ad91a7118973689d'
      };
      tdtAdmin(params).then((res) => {
        console.log(res)
        that.cityList = res.data.child.sort((city1, city2) => {
            return parseInt(city1.cityCode) - parseInt(city2.cityCode);
          });
      })
    },
    changeSearchList () {
      this.computeListDivHeight();
      this.searchKeyWord();
    },
    createMarker (item) {
      this.$emit('selectPoint', item);
      this.searchKey = item.name;
      this.searchListVisiable = false;
    },
    focus () {
      if (this.searchKey && this.searchKey.length > 0 && this.searchList) {
        this.searchListVisiable = true;
      }
    },
    selectCity (city) {
      this.selectedCity = city;
      this.value = city.nameabbrevation;
      // 改变城市，改变中心点
      this.$emit('changeCity', city);
      console.log('选中:', city)
    },
    clearCityValue () {
      this.selectedCity = null;
    },
    computeListDivHeight () {
      var div = document.getElementById('search-list');
      if (div) {
        if (window.innerHeight > 240) {
          div.style.height = window.innerHeight - 180 + 'px';
          return;
        }
        div.style.height = '60px';
      }
    },
    setListDivHeight (val) {
      var div = document.getElementById('search-list');
      div.style.height = val;
    }

  },
  created () {
    this.$nextTick(() => {
    });
  },
  mounted () {
    window.onresize = () => {
      this.computeListDivHeight();
    }
  },
  computed: {
  },
  watch: {
  },
  beforeMount () {
    this.searchGovernment('156000000');
  },
}
</script>

<style lang="scss" scoped>
.search-div {
  position: relative;
  z-index: 999;
  width: 450px;
  top: 30px;
  left: 35%;
  height: 60px;
  opacity: 0.9;
}

.search-list {
  position: absolute;
  width: 100%;
  z-index: 999;
  background-color: white;
  line-height: 30px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 600px;
}

.search-list > ul > li {
  list-style-type: none;
  padding-right: 20px;
}

.search-list > .search-list-ul {
  text-align: left;
  width: 340px;
  padding-left: 15px;

  a {
    text-decoration: none;
  }
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 6px 0;
}

.search-div .el-select {
  width: 120px;
}

.city-list {
  height: 400px;
  width: 300px;
  overflow: auto;
  overflow-x: hidden;
  padding: 8px;
}

.city-list-item {
  width: 100%;
  display: flex;
}

.city {
  width: 40%;
  height: 100%;
}

.city-childs {
  width: 60%;
  height: 100%;
}

.city-childs-item {
  float: left;
  padding: 5px;

  a {
    text-decoration: none;
  }
}
</style>